<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <title>月亮飘落</title>
    <style>
        body {
            margin: 0;
            overflow: hidden;
            background: linear-gradient(to bottom, #0f0c29, #302b63, #24243e);
            height: 100vh;
            display: flex;
            justify-content: center;
            align-items: center;
        }
        
        .moon {
            position: absolute;
            font-size: 24px;
            filter: drop-shadow(0 0 10px rgba(255, 255, 150, 0.8));
            animation: fall 4s ease-in-out infinite;
        }

        .star {
            position: absolute;
            font-size: 15px;
            filter: drop-shadow(0 0 5px rgba(255, 255, 255, 0.8));
            animation: twinkle 2s ease-in-out infinite;
        }

        .sparkle {
            position: absolute;
            width: 4px;
            height: 4px;
            background: white;
            border-radius: 50%;
            animation: sparkle 1.5s ease-in-out infinite;
        }

        @keyframes fall {
            0% {
                transform: translateY(-50vh) translateX(-20px) rotate(0deg) scale(1);
                opacity: 0;
            }
            10% {
                opacity: 1;
            }
            50% {
                transform: translateY(25vh) translateX(20px) rotate(180deg) scale(1.5);
                opacity: 0.8;
            }
            100% {
                transform: translateY(120vh) translateX(-20px) rotate(360deg) scale(1);
                opacity: 0;
            }
        }

        @keyframes twinkle {
            0%, 100% { 
                opacity: 0; 
                transform: scale(0.5) rotate(0deg); 
            }
            50% { 
                opacity: 1; 
                transform: scale(1.2) rotate(180deg); 
            }
        }

        @keyframes sparkle {
            0%, 100% { 
                transform: scale(0) rotate(0deg); 
                opacity: 0;
            }
            50% { 
                transform: scale(1) rotate(180deg); 
                opacity: 1;
                box-shadow: 
                    0 0 20px #fff,
                    0 0 40px #fff,
                    0 0 60px #fff;
            }
        }

        .glow {
            position: fixed;
            width: 100%;
            height: 100%;
            pointer-events: none;
            background: radial-gradient(circle at 50% 50%, 
                rgba(255, 255, 255, 0.1) 0%,
                rgba(0, 0, 0, 0) 70%);
            animation: glow 4s ease-in-out infinite;
        }

        @keyframes glow {
            0%, 100% { opacity: 0.3; }
            50% { opacity: 0.6; }
        }
    </style>
</head>
<body>
    <div class="glow"></div>
    <script>
        function createMoon(x = null) {
            const moon = document.createElement('div');
            moon.className = 'moon';
            moon.innerHTML = '🌙';
            moon.style.left = (x !== null ? x : Math.random() * 100) + '%';
            moon.style.top = '-50px'; // 添加这行，设置初始位置
            moon.style.animationDuration = 3 + Math.random() * 2 + 's';
            document.body.appendChild(moon);
            
            createTrailingEffect(moon);
            
            moon.addEventListener('animationend', () => {
                moon.remove();
            });
        }

        function createStar() {
            const star = document.createElement('div');
            star.className = 'star';
            star.innerHTML = '✨';
            star.style.left = Math.random() * 100 + '%';
            star.style.top = Math.random() * 30 + '%'; // 修改这行，限制在上部区域
            star.style.animationDelay = Math.random() * 2 + 's';
            document.body.appendChild(star);
            
            setTimeout(() => {
                star.remove();
            }, 4000);
        }

        function createSparkle(x, y) {
            const sparkle = document.createElement('div');
            sparkle.className = 'sparkle';
            sparkle.style.left = x + 'px';
            sparkle.style.top = y + 'px';
            document.body.appendChild(sparkle);
            
            setTimeout(() => {
                sparkle.remove();
            }, 1500);
        }

        function createTrailingEffect(element) {
            const interval = setInterval(() => {
                const rect = element.getBoundingClientRect();
                createSparkle(
                    rect.left + rect.width/2 + (Math.random() - 0.5) * 30,
                    rect.top + rect.height/2 + (Math.random() - 0.5) * 30
                );
            }, 100);

            setTimeout(() => clearInterval(interval), 4000);
        }

        // 自动创建月亮
        setInterval(() => createMoon(), 1000);

        // 自动创建星星
        setInterval(() => createStar(), 1500);

        // 点击效果
        document.addEventListener('click', (e) => {
            const x = (e.clientX / window.innerWidth) * 100;
            createMoon(x);
            // 点击时创建星星效果
            for(let i = 0; i < 5; i++) {
                setTimeout(() => {
                    createSparkle(e.clientX + (Math.random() - 0.5) * 50, 
                                e.clientY + (Math.random() - 0.5) * 50);
                }, i * 100);
            }
        });
    </script>
</body>
</html>
